<template>
  <div class="smartlock-record-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>智能锁使用记录</h2>
      </div>
      <div class="header-right">
        <el-button 
          type="primary" 
          @click="refreshData" 
          :loading="loading"
          icon="el-icon-refresh"
          size="medium"
        >
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选栏 -->
    <el-form :inline="true" @submit.native.prevent class="search-form">
      <el-form-item>
        <el-input
          v-model="searchKeyword"
          @keyup.native.enter="searchRecords"
          placeholder="请输入锁ID、用户ID或开锁人姓名"
          style="width: 250px; margin-right: 15px"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="lockFilter"
          placeholder="选择智能锁"
          style="width: 200px; margin-right: 15px"
          clearable
        >
          <el-option 
            v-for="lock in lockInfoList" 
            :key="lock.lockId" 
            :label="getLockLabel(lock)"
            :value="lock.lockId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="operationFilter"
          placeholder="操作类型"
          style="width: 150px; margin-right: 15px"
          clearable
        >
          <el-option label="开锁" value="1"></el-option>
          <el-option label="关锁" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="statusFilter"
          placeholder="设备状态"
          style="width: 150px; margin-right: 15px"
          clearable
        >
          <el-option label="开启" value="1"></el-option>
          <el-option label="关闭" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px; margin-right: 15px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchRecords">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="exportRecords">导出记录</el-button>
      </el-form-item>
     
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="recordData"
      border
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      
      <!-- LockInfo 相关字段 -->
      <el-table-column prop="lockInfo.college" label="学院" align="center" width="120">
      </el-table-column>
      
      <el-table-column prop="lockInfo.classroom" label="教室" align="center" width="120">
      </el-table-column>
      
      <el-table-column prop="lockInfo.ipAddress" label="IP地址" align="center" width="120">
      </el-table-column>
      
      <el-table-column prop="lockInfo.snCode" label="SN序列号" align="center" width="120" show-overflow-tooltip>
      </el-table-column>
      
      <!-- SwitchRecord 相关字段 -->
      <el-table-column prop="operationMethod" label="操作类型" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.operationMethod == 1 ? 'success' : 'info'"
            size="small"
          >
            {{ getOperationType(scope.row.operationMethod) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="operatorName" label="开锁人" align="center" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.userInfo && scope.row.userInfo.nickName">
            {{ scope.row.userInfo.nickName }}
          </span>
          <span v-else-if="scope.row.userId">
            用户{{ scope.row.userId }}
          </span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="operationTime" label="操作时间" align="center" width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.operationTime) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="lockInfo.switchStatus" label="设备状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.lockInfo && scope.row.lockInfo.switchStatus == 1 ? 'success' : 'warning'"
            size="small"
          >
            {{ getSwitchStatus(scope.row.lockInfo) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="lockInfo.remarks" label="通道号" align="center" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewDetails(scope.row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      title="智能锁操作记录详情"
      :visible.sync="dialogVisible"
      width="700px"
      :modal="false"
    >
      <div v-if="selectedRecord">
        <!-- 智能锁信息 -->
        <h4>智能锁设备信息</h4>
        <el-descriptions :column="2" border style="margin-bottom: 20px;">
          <el-descriptions-item label="锁设备ID">{{ getLockId() }}</el-descriptions-item>
          <el-descriptions-item label="学院">{{ getCollege() }}</el-descriptions-item>
          <el-descriptions-item label="教室">{{ getClassroom() }}</el-descriptions-item>
          <el-descriptions-item label="IP地址">{{ getIpAddress() }}</el-descriptions-item>
          <el-descriptions-item label="SN序列号">{{ getSnCode() }}</el-descriptions-item>
          <el-descriptions-item label="端口号">{{ getPortNumber() }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType()" size="small">
              {{ getStatusText() }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ getRemarks() }}</el-descriptions-item>
        </el-descriptions>
        
        <!-- 操作记录信息 -->
        <h4>操作记录信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="记录ID">{{ selectedRecord.switchId }}</el-descriptions-item>
          <el-descriptions-item label="锁设备ID">{{ selectedRecord.lockId }}</el-descriptions-item>
          <el-descriptions-item label="操作类型">
            <el-tag :type="selectedRecord.operationMethod == 1 ? 'success' : 'info'" size="small">
              {{ getOperationType(selectedRecord.operationMethod) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开锁人">{{ getOperatorName() }}</el-descriptions-item>
          <el-descriptions-item label="操作用户ID">{{ selectedRecord.userId || '未知' }}</el-descriptions-item>
          <el-descriptions-item label="操作时间">{{ formatDate(selectedRecord.operationTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 智能锁相关API接口路径常量
const SMARTLOCK_API = {
  // SmartLockController 接口
  LOCK_SELECT_ALL: '/api/smart/lock/selectAll',
  LOCK_GET_BY_ID: '/api/smart/lock/getById',
  
  // SwitchRecordController 接口
  SWITCH_RECORD_LIST: '/api/smart/switchRecord',
  SWITCH_RECORD_BY_LOCK: '/api/smart/switchRecord/lock/',
  SWITCH_RECORD_BY_TIME: '/api/smart/switchRecord/timeRange',
  
  // AuthController 接口 - 获取用户信息
  USER_INFO_BY_ID: '/api/userInfoById'
}

export default {
  name: 'SmartLockRecord',
  data() {
    return {
      // 搜索参数
      searchKeyword: '',
      statusFilter: '',
      operationFilter: '',
      lockFilter: '',
      dateRange: null,
      
      // 表格数据
      recordData: [],
      allRecords: [],
      loading: false,
      
      // 智能锁设备列表
      lockInfoList: [],
      
      // 状态过滤值（临时存储）
      statusFilterValue: '',
      
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      
      // 对话框相关
      dialogVisible: false,
      selectedRecord: null
    }
  },
  
  mounted() {
    this.loadLockInfo()
    this.loadRecordData()
  },
  
  methods: {
    // 加载智能锁设备信息 - SmartLockController
    loadLockInfo() {
      this.$get(SMARTLOCK_API.LOCK_SELECT_ALL).then(res => {
        if (res && res.code === 200) {
          this.lockInfoList = res.data || []
          if (this.lockInfoList.length > 0) {
            this.$message.success('成功加载 ' + this.lockInfoList.length + ' 个智能锁设备')
          }
        } else if (res && res.msg) {
          this.$message.error('获取智能锁设备信息失败：' + res.msg)
        } else {
          this.$message.error('获取智能锁设备信息失败：网络错误或后端服务未启动')
        }
      }).catch(err => {
        this.$message.error('获取智能锁设备信息失败：网络连接异常')
        console.error('API请求失败:', err)
      })
    },
    
    // 加载智能锁使用记录 - SwitchRecordController
    loadRecordData() {
      this.loading = true
      
      // 根据筛选条件选择不同的接口
      let apiCall
      
      if (this.lockFilter) {
        // 根据锁ID查询记录
        apiCall = this.$get(SMARTLOCK_API.SWITCH_RECORD_BY_LOCK + this.lockFilter)
      } else if (this.dateRange && this.dateRange.length === 2) {
        // 根据时间范围查询记录
        const startTime = this.dateRange[0] + 'T00:00:00'
        const endTime = this.dateRange[1] + 'T23:59:59'
        apiCall = this.$get(SMARTLOCK_API.SWITCH_RECORD_BY_TIME, {
          startTime,
          endTime
        })
      } else {
        // 查询所有记录
        apiCall = this.$get(SMARTLOCK_API.SWITCH_RECORD_LIST)
      }
      
      apiCall.then(res => {
        if (res && res.code === 200) {
          let records = res.data || []
          
          // 前端进行搜索过滤
          if (this.searchKeyword) {
            const keyword = this.searchKeyword.toLowerCase()
            records = records.filter(record => {
              const userId = record.userId ? record.userId.toString() : ''
              const lockId = record.lockId ? record.lockId.toString() : ''
              const userName = record.userInfo && record.userInfo.nickName ? record.userInfo.nickName.toLowerCase() : ''
              return userId.includes(keyword) || lockId.includes(keyword) || userName.includes(keyword)
            })
          }
          
          // 前端进行操作类型过滤
          if (this.operationFilter !== '' && this.operationFilter !== null) {
            const filterValue = parseInt(this.operationFilter)
            records = records.filter(record => record.operationMethod === filterValue)
          }
          
          // 先加载锁信息再进行设备状态过滤（异步处理）
          this.statusFilterValue = this.statusFilter
          
          this.allRecords = records
          this.total = this.allRecords.length
          
          // 前端分页
          this.applyPagination()
          
          // 成功提示
          if (records.length > 0) {
            this.$message.success('成功加载 ' + records.length + ' 条操作记录')
          } else {
            this.$message.info('暂无符合条件的操作记录')
          }
        } else if (res && res.msg) {
          this.$message.error('获取开关记录失败：' + res.msg)
        } else {
          this.$message.error('获取开关记录失败：网络错误或后端服务未启动')
        }
        this.loading = false
      }).catch(err => {
        this.$message.error('获取开关记录失败：网络连接异常')
        console.error('API请求失败:', err)
        this.loading = false
      })
    },
    
    // 为记录加载对应的锁信息
    loadLockInfoForRecords() {
      const lockIds = [...new Set(this.recordData.map(record => record.lockId).filter(id => id))]
      let loadedCount = 0
      const totalCount = lockIds.length
      
      if (totalCount === 0) {
        // 如果没有锁ID，直接加载用户信息
        this.loadUserInfoForRecords()
        return
      }
      
      lockIds.forEach(lockId => {
        this.$get(SMARTLOCK_API.LOCK_GET_BY_ID, { lockId }).then(res => {
          if (res && res.code === 200) {
            const lockInfo = res.data
            // 更新所有相关记录的lockInfo
            this.recordData.forEach(record => {
              if (record.lockId === lockId) {
                this.$set(record, 'lockInfo', lockInfo)
              }
            })
          }
          
          loadedCount++
          // 当所有锁信息加载完成后，加载用户信息
          if (loadedCount === totalCount) {
            this.loadUserInfoForRecords()
          }
        }).catch(err => {
          console.error('获取锁信息失败:', err)
          loadedCount++
          if (loadedCount === totalCount) {
            this.loadUserInfoForRecords()
          }
        })
      })
    },
    
    // 为记录加载对应的用户信息
    loadUserInfoForRecords() {
      const userIds = [...new Set(this.recordData.map(record => record.userId).filter(id => id))]
      let loadedUserCount = 0
      const totalUserCount = userIds.length
      
      if (totalUserCount === 0) {
        // 如果没有用户ID，直接应用状态过滤
        this.applyStatusFilter()
        return
      }
      
      userIds.forEach(userId => {
        this.$get(SMARTLOCK_API.USER_INFO_BY_ID, { userid: userId }).then(res => {
          if (res && res.code === 200) {
            const userInfo = res.data
            // 更新所有相关记录的userInfo
            this.recordData.forEach(record => {
              if (record.userId === userId) {
                this.$set(record, 'userInfo', userInfo)
              }
            })
          }
          
          loadedUserCount++
          // 当所有用户信息加载完成后，应用设备状态过滤
          if (loadedUserCount === totalUserCount) {
            this.applyStatusFilter()
          }
        }).catch(err => {
          console.error('获取用户信息失败:', err)
          loadedUserCount++
          if (loadedUserCount === totalUserCount) {
            this.applyStatusFilter()
          }
        })
      })
    },
    
    // 应用设备状态过滤
    applyStatusFilter() {
      if (this.statusFilterValue !== '' && this.statusFilterValue !== null) {
        const filterValue = parseInt(this.statusFilterValue)
        this.recordData = this.recordData.filter(record => {
          return record.lockInfo && record.lockInfo.switchStatus === filterValue
        })
      }
    },
    
    // 前端分页
    applyPagination() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      this.recordData = this.allRecords.slice(startIndex, endIndex)
      this.loadLockInfoForRecords()
    },
    
    // 搜索记录
    searchRecords() {
      this.currentPage = 1
      this.loadRecordData()
    },
    
    // 导出记录
    exportRecords() {
      this.$message.info('正在导出记录，请稍候...')
      
      // 将当前筛选结果转换为CSV格式
      const csvData = this.convertToCSV(this.allRecords)
      const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = '智能锁使用记录_' + this.getFormattedDateTime() + '.csv'
      link.click()
      window.URL.revokeObjectURL(url)
      this.$message.success('记录导出成功')
    },
    
    // 转换为CSV格式  
    convertToCSV(data) {
      const header = '记录ID,锁ID,开锁人,操作方式,操作时间\n'
      const rows = data.map(record => {
        const operationMethod = record.operationMethod == 1 ? '开锁' : '关锁'
        const operationTime = this.formatDate(record.operationTime)
        const switchId = record.switchId || ''
        const lockId = record.lockId || ''
        let operatorName = '未知'
        if (record.userInfo && record.userInfo.nickName) {
          operatorName = record.userInfo.nickName
        } else if (record.userId) {
          operatorName = '用户' + record.userId
        }
        return switchId + ',' + lockId + ',' + operatorName + ',' + operationMethod + ',' + operationTime
      })
      return header + rows.join('\n')
    },
    
    // 重置搜索
    resetSearch() {
      this.searchKeyword = ''
      this.lockFilter = ''
      this.operationFilter = ''
      this.statusFilter = ''
      this.dateRange = null
      this.currentPage = 1
      this.$message.info('已重置搜索条件')
      this.loadRecordData()
    },
    
    // 查看详情
    viewDetails(row) {
      this.selectedRecord = row
      this.dialogVisible = true
    },
    
    // 分页相关
    handleCurrentChange(page) {
      this.currentPage = page
      this.applyPagination()
    },
    
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.applyPagination()
    },
    
    // 格式化日期
    formatDate(timestamp) {
      if (!timestamp) return '未知'
      
      if (typeof timestamp === 'string' && timestamp.includes('-')) {
        return timestamp
      }
      
      if (typeof timestamp === 'number') {
        const date = new Date(timestamp)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hour = String(date.getHours()).padStart(2, '0')
        const minute = String(date.getMinutes()).padStart(2, '0')
        const second = String(date.getSeconds()).padStart(2, '0')
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      }
      
      return timestamp.toString()
    },
    
    // 获取格式化的当前日期时间（用于文件名）
    getFormattedDateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hour = String(now.getHours()).padStart(2, '0')
      const minute = String(now.getMinutes()).padStart(2, '0')
      const second = String(now.getSeconds()).padStart(2, '0')
      return year + month + day + hour + minute + second
    },
    
    // 获取锁标签
    getLockLabel(lock) {
      if (lock.college && lock.classroom) {
        return lock.college + '-' + lock.classroom
      }
      return '设备' + lock.lockId
    },
    
    // 获取操作类型
    getOperationType(operationMethod) {
      return operationMethod == 1 ? '开锁' : '关锁'
    },
    
    // 获取设备状态
    getSwitchStatus(lockInfo) {
      if (lockInfo && lockInfo.switchStatus == 1) {
        return '开启'
      }
      return '关闭'
    },
    
    // 详情页面的辅助方法
    getLockId() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.lockId : '未知'
    },
    
    getCollege() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.college || '未知' : '未知'
    },
    
    getClassroom() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.classroom || '未知' : '未知'
    },
    
    getIpAddress() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.ipAddress || '未记录' : '未记录'
    },
    
    getSnCode() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.snCode || '未知' : '未知'
    },
    
    getPortNumber() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.portNumber || '未知' : '未知'
    },
    
    getStatusType() {
      if (this.selectedRecord && this.selectedRecord.lockInfo && 
          this.selectedRecord.lockInfo.switchStatus == 1) {
        return 'success'
      }
      return 'warning'
    },
    
    getStatusText() {
      if (this.selectedRecord && this.selectedRecord.lockInfo && 
          this.selectedRecord.lockInfo.switchStatus == 1) {
        return '开启'
      }
      return '关闭'
    },
    
    getRemarks() {
      return this.selectedRecord && this.selectedRecord.lockInfo ? 
        this.selectedRecord.lockInfo.remarks || '无' : '无'
    },
    
    // 获取操作人姓名
    getOperatorName() {
      if (this.selectedRecord && this.selectedRecord.userInfo && this.selectedRecord.userInfo.nickName) {
        return this.selectedRecord.userInfo.nickName
      } else if (this.selectedRecord && this.selectedRecord.userId) {
        return '用户' + this.selectedRecord.userId
      }
      return '未知'
    },
    
    // 刷新数据
    refreshData() {
      this.$message.info('正在刷新数据...');
      // 重新加载锁设备信息和记录数据
      this.loadLockInfo();
      this.loadRecordData();
    }
  }
}
</script>

<style scoped>
.smartlock-record-container {
  padding: 20px;
  background-color: #fff;
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
  /* 确保滚动平滑 */
  scroll-behavior: smooth;
  /* 防止内容溢出到父容器 */
  contain: layout style paint;
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-left h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 500;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.header-right {
  display: flex;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

/* 详情对话框标题样式 */
.el-dialog h4 {
  margin: 15px 0 10px 0;
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

/* 表格样式优化 */
.el-table {
  font-size: 14px;
  margin-top: 10px;
}

.el-table .cell {
  padding: 0 8px;
}

.el-table th {
  background-color: #fafafa;
}

.el-table--border td, .el-table--border th {
  border-right: 1px solid #ebeef5;
}

/* 标签样式优化 */
.el-tag {
  border-radius: 4px;
}

/* 描述列表样式优化 */
.el-descriptions {
  margin-bottom: 0;
}

.el-descriptions__label {
  font-weight: 600;
  color: #606266;
}

.el-descriptions__content {
  color: #303133;
}

/* 表单项间距 */
.el-form--inline .el-form-item {
  margin-right: 15px;
  margin-bottom: 10px;
}

/* 按钮组样式 */
.el-form-item:last-child {
  margin-right: 0;
}

/* 加载状态优化 */
.el-loading-mask {
  border-radius: 8px;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .el-table {
    font-size: 13px;
  }
  
  .el-table .cell {
    padding: 0 6px;
  }
}

@media screen and (max-width: 768px) {
  .smartlock-record-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    text-align: center;
  }
  
  .header-left h2 {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .header-right {
    justify-content: center;
  }
  
  .search-form {
    padding: 15px;
  }
  
  .search-form .el-form-item {
    margin-bottom: 15px;
    margin-right: 0;
  }
  
  .search-form .el-input,
  .search-form .el-select,
  .search-form .el-date-picker {
    width: 100% !important;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .pagination-wrapper {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .el-dialog {
    width: 95% !important;
    margin: 0 auto;
  }
  
  .el-descriptions {
    font-size: 12px;
  }
}

/* 自定义滚动条样式 */
.smartlock-record-container::-webkit-scrollbar {
  width: 8px;
}

.smartlock-record-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
  margin: 4px;
}

.smartlock-record-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.smartlock-record-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.smartlock-record-container::-webkit-scrollbar-corner {
  background: transparent;
}

/* 深色模式兼容 */
@media (prefers-color-scheme: dark) {
  .smartlock-record-container {
    background-color: #1a1a1a;
    color: #fff;
  }
  
  .page-header h2 {
    color: #fff;
    border-color: #409eff;
  }
  
  .search-form {
    background-color: #2d2d2d;
    border-color: #404040;
  }
}
</style>